<!--
 * @Author: liaoxing
 * @Date: 2022-03-07 11:10:11
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-23 18:23:07
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\components\calculatorTag\index.vue
-->
<template>
  <div class="calculatorTag">
      <div style="height: 40px; width: 100%" class="flex relative">
        <div draggable="true"  @dblclick="handlerDbclick(item)" @dragstart="drag($event, item)" v-for="(item, index) in operational" :key="index + 'operational'" class="operational">
          <el-tag type="danger" class="finger">{{ item.title }}</el-tag>
        </div>
        <div style="margin-left: 20px"> 自定义运算符:</div>
        <div draggable="true" @dblclick="handlerDbclick(customizeOperate)" @dragstart="drag($event, customizeOperate)" class="operational customizeOperate">
          <el-tag type="danger" class="finger"><el-input v-model="customizeOperate.title" @focus="currentIndex = null"></el-input></el-tag>
        </div>
        <div class="absolute" style="right: 0px" v-if="editData.amount">
          <span style="margin-left: 20px"> 计算结果为: </span>
          <el-tag class="finger">{{ editData.amount }}元</el-tag>
        </div>
      </div>
      <div class="calculator flex">
        <div class="contenteditableBox" @dragover="allowDrop($event)" @drop="drop($event)">
          <div class="calculatorWrap" :class="{'isSelect': currentIndex || currentIndex == 0}" @click.stop="currentIndex = calculatorList.length - 1">
            <template v-for="(item, index) in calculatorList">
              <template v-if="item.type">
                <el-tag v-if="!judgeOperate(item.data.key)" style="float: left; margin-top: 10px"  :key="index + 'el-tag'" size="medium" :disable-transitions="false"  @close="handleClose(index)">{{ item.data.title }}</el-tag>
                <el-tag v-else type="danger" style="float: left; margin-top: 10px" :key="index + 'el-tag-danger'" size="medium" :disable-transitions="false"  @close="handleClose(index)">{{ item.data.title }}</el-tag>
              </template>
              <div v-else :key="index + 'block'" class="flex-center" :class="currentIndex == index ? 'simulatedCursor' : ''" style="width: 10px; height: 28px; float: left; margin-top: 10px" @click.stop="currentPositon(index)">
                {{ currentIndex == index ? '|' : '' }}
              </div>
            </template>
          </div>
        </div>
        <div class="calculatorTreeBox">
          <!-- @blur="currentIndex = calculatorList.length - 1" -->
          <el-input
            @focus="currentIndex = null"
            size="mini"
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <div class="treeBox">
            <el-tree :data="dependencyList" ref="calculatorTree" :props="propsInfo" :default-expand-all="false" :filter-node-method="filterNode">
              <div
                slot-scope="{ node, data }"
                style="positon: absolute; z-index: 9999;"
                :draggable="(data.isLeaf) ? true : false"
                @dragstart="drag($event, data)"
                @dblclick="handlerDbclick(data)"
              >
                <span v-if="!data.isLeaf">{{ node.label }}</span>
                <el-tag v-else>{{ node.label }}</el-tag>
              </div>
            </el-tree>
          </div>
        </div>
      </div>
      <!-- <div class="previewCalculator">
        <div>{{ calculatorText }}</div>
        <div>{{ calculator }}</div>
      </div> -->
  </div>
</template>

<script>
export default {
  name: "calculatorTag",
  props: {
    calculatorList: {
      type: Array
    },
    dependencyList: {
      type: Array
    },
    chooseVariable: {
      type: Object
    },
    propsInfo: {
      type: Object
    },
    editData: {
      type: Object
    },
  },
  data () {
    return {
      // dependencyList: [],
      calculatorText: "",
      calculator: "",
      currentIndex: null,
      tempCurrentIndex: null,
      operational: [
        {title: '+', key: '+'},
        {title: '-', key: '-'},
        {title: '*', key: '*'},
        {title: '/', key: '/'},
        {title: '(', key: '('},
        {title: ')', key: ')'},
      ],
      operationalKey: ['+', '-', '*', '/', '(', ')',],
      customizeOperate: {title: '', key: ''},
      filterText: ''
    }
  },
  watch: {
    filterText: function (val) {
      this.$refs.calculatorTree.filter(val);
    }, 
    calculatorList: {
      deep: true,
      handler (value) {
        this.calculatorText = ''
        this.calculator = ''
        value.forEach(item => {
          if (item.type) {
            this.calculatorText += `${item.data.title} `
            this.calculator += `${item.data.key} `
          }
        })
      }
    },
    'customizeOperate.title' (value) {
      this.customizeOperate.key = value
    },
    currentIndex (value) {
      if (value != null) {
        this.tempCurrentIndex = value
      }
    }
  },
  created () {
    console.log(this.editData)
    document.onkeydown = (ev) => {
      if (this.currentIndex && ev.keyCode == 8) {
        this.handleClose(this.currentIndex)
      }
    }
    let index = window.cancelInnerEvent.length - 1
    window.cancelInnerEvent.push(this.cancelSelectIndex)
    this.$once('hook:beforeDestroy', function () {
      window.cancelInnerEvent.splice(index, 1)
      console.log(window.cancelInnerEvent)
    })
  },
  methods: {
    judgeOperate (key) {
      if (this.operationalKey.indexOf(key) > -1) {
        return true
      }
      return false
    },
    drag(ev, info) {
      console.log(info)
      this.$emit('update:chooseVariable', info)
    },
    handleClose(index) {
      this.calculatorList.splice(index - 1, 2)
      this.currentIndex = index - 2
    },
    allowDrop(ev) {
      ev.preventDefault()
    },
    drop(ev) {
      ev.preventDefault()
      if (this.currentIndex === null) return

      this.calculatorList.splice(this.currentIndex + 1, 0, {data: this.chooseVariable, type: true}, {type: false})
      this.currentIndex += 2
    },
    currentPositon (index) {
      this.currentIndex = index
    },
    handlerDbclick (info) {
      if (this.tempCurrentIndex == null) {
        this.tempCurrentIndex = this.calculatorList.length - 1
      }
      this.calculatorList.splice(this.tempCurrentIndex + 1, 0, {data: info, type: true}, {type: false})
      this.currentIndex = this.tempCurrentIndex + 2
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    cancelSelectIndex () {
      this.currentIndex = null
    }
  }
}
</script>
<style lang="less">
.calculatorTag{
  width: 100%;
  height: 100%;
  .el-tree-node__content {
    height: 36px;
  }
  .operational{
    margin: 0 5px;
    user-select: none;
  }
  .calculator {
    width: 100%;
    height: 350px;
  }
  .contenteditableBox {
    width: 68%;
    height: 100%;
    white-space: pre-wrap;
    .calculatorWrap{
      width: 100%;
      height: 100%;
      border-radius: 8px;
      padding: 0 10px;
      border: 1px solid #C0C4CC;
      overflow: auto;
    }
    .isSelect{
      border-color: #1890ff;
    }
  }
  .calculatorTreeBox {
    width: 32%;
    height: 100%;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    .treeBox{
      margin-top: 4px;
      height: calc(100% - 40px);
      overflow: auto;
    }
  }
  .simulatedCursor{
    animation: glimmer 1s linear infinite;
  }
  @keyframes glimmer {
    0%{
      opacity: 1;
    }
    50%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  .customizeOperate{
    height: 28px;
    .el-input{
      background-color: unset;
      margin: 0;
      padding: 0 5px;
      height: 100%;
      width: 50px;
      box-sizing: border-box;
      input{
        background-color: unset;
        text-align: center;
        border: none;
        height: 100%;
        width: 100%;
        padding: 0;
        color: #ff4949;
      }
    }
  }
  .previewCalculator{
    margin-top: 20px;
  }
}
</style>